<template>
<div class="pd clearfix" style="font-size:0">
  <loading v-if="loading"></loading>
  <ul class="menu" v-else>
    <div class="menu-btn" style="margin-bottom:10px; text-align:right;">
      <!--<el-button type="primary">展开</el-button>
      <el-button type="primary">收起</el-button>-->
      <el-button type="success" @click="addparent">添加父级菜单</el-button>
      <!--<el-button type="warning">刷新</el-button>-->
    </div>
    <li class="clearfix" :key="item.id" v-for="item in menulist">
      <div class="menu-box">
        <i :class="item.icon" class="icon-title"></i>
        <span class="title" v-html="item.title"></span>
        <span class="url" v-html="item.uri"></span>
        <div class="row-btn fr">
          <i class="icon-add-Content" title="添加子级菜单" @click="addchild(item.id, item.title)"></i>
          <i class="icon-check i-icon" title="查看功能" @click="checkmenu(item.id)"></i>
          <i class="icon-authority" title="添加功能" @click="addauth(item.id, item.title)"></i>
          <i class="icon-revamp" title="修改菜单" @click="revampmenu(item, 'p')"></i>
          <i class="icon-delete" title="删除菜单" @click="delmenu(item.id)"></i>
        </div>
      </div>
      <ul v-if="item.child!==''">
        <li class="clearfix" :key="child.id" v-for="child in item.child">
          <span class="title" v-html="child.title"></span>
          <span class="url" v-html="child.uri"></span>
          <div class="row-btn fr">
            <i class="icon-check i-icon" title="查看功能" @click="checkmenu(child.id)"></i>
            <i class="icon-authority" title="添加功能" @click="addauth(child.id, child.title)"></i>
            <i class="icon-revamp" title="修改菜单" @click="revampmenu(child, 'c')"></i>
            <i class="icon-delete" title="删除菜单" @click="delmenu(child.id)"></i>
          </div>
        </li>
      </ul>
    </li>
  </ul>
  <!--添加父级菜单-->
  <el-dialog title="添加一级菜单" :visible.sync="parentVisible">
    <div class="input-group">
      <label>菜单名称：</label>
      <div class="input-group-box"><el-input placeholder="菜单名称" v-model="addp.parentName"></el-input></div>
    </div>
    <div class="input-group">
      <label>路径：</label>
      <div class="input-group-box"><el-input placeholder="路径url" v-model="addp.parentUrl"></el-input></div>
    </div>
    <div class="input-group">
      <label>图标：</label>
      <div class="input-group-box">
        <el-radio-group v-model="addp.parentIcon">
          <el-radio :label="item" :key="index" v-for="(item, index) in navIcon">
            <i :class="item"></i>
          </el-radio>
        </el-radio-group>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="parentVisible = false">取 消</el-button>
      <el-button type="primary" @click="q_add">确 定</el-button>
    </span>
  </el-dialog>
  <!--添加子级菜单-->
  <el-dialog title="添加子级菜单" :visible.sync="childVisible">
    <div class="input-group">
      <label>所属父级：</label>
      <div class="input-group-box"><el-input disabled v-model="addc.childAtParent"></el-input></div>
    </div>
    <div class="input-group">
      <label>标题：</label>
      <div class="input-group-box"><el-input placeholder="标题" v-model="addc.childTit"></el-input></div>
    </div>
    <div class="input-group">
      <label>路径：</label>
      <div class="input-group-box">
        <el-input placeholder="路径url" v-model="addc.childUrl"></el-input>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="childVisible = false">取 消</el-button>
      <el-button type="primary" @click="child_add">确 定</el-button>
    </span>
  </el-dialog>
  <!--修改菜单信息-->
  <el-dialog title="修改菜单信息" :visible.sync="revampVisible">
    <div class="input-group">
      <label>菜单名称：</label>
      <div class="input-group-box"><el-input placeholder="标题" v-model="revamp.title"></el-input></div>
    </div>
    <div class="input-group">
      <label>路径：</label>
      <div class="input-group-box">
        <el-input placeholder="路径url" v-model="revamp.url"></el-input>
      </div>
    </div>
    <div class="input-group" v-if="revamp.iconShow">
      <label>icon：</label>
      <div class="input-group-box">
        <div class="input-group-box">
        <el-radio-group v-model="revamp.icon">
          <el-radio :label="item" :key="index" v-for="(item, index) in navIcon">
            <i :class="item"></i>
          </el-radio>
        </el-radio-group>
      </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="revampVisible = false">取 消</el-button>
      <el-button type="primary" @click="q_revamp">确 定</el-button>
    </span>
  </el-dialog>
  <!--添加功能-->
  <el-dialog title="添加权限" :visible.sync="authVisible">
    <div class="input-group">
      <label>所属菜单：</label>
      <div class="input-group-box"><el-input disabled v-model="auth.atMenu"></el-input></div>
    </div>
    <div class="input-group">
      <label>权限名称：</label>
      <div class="input-group-box"><el-input placeholder="权限名称" v-model="auth.title"></el-input></div>
    </div>
    <div class="input-group">
      <label>标识：</label>
      <div class="input-group-box">
        <el-input placeholder="标识" v-model="auth.unique_key"></el-input>
      </div>
    </div>
    <div class="input-group">
      <label>路径：</label>
      <div class="input-group-box">
        <el-input placeholder="路径" v-model="auth.action_uri"></el-input>
      </div>
    </div>
    <div class="input-group">
      <label>icon：</label>
      <div class="input-group-box">
        <div class="input-group-box">
        <el-radio-group v-model="auth.icon">
          <el-radio :label="item" :key="index" v-for="(item, index) in funIcon">
            <i :class="item"></i>
          </el-radio>
        </el-radio-group>
      </div>
      </div>
    </div>
    <div class="input-group">
      <label>操作级别：</label>
      <div class="input-group-box">
        <div class="input-group-box">
        <el-radio-group v-model="auth.level">
          <el-radio label="ROW">行级</el-radio>
          <el-radio label="PAGE">页面级</el-radio>
        </el-radio-group>
      </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="authVisible = false">取 消</el-button>
      <el-button type="primary" @click="a_auth">确 定</el-button>
    </span>
  </el-dialog>
</div>
</template>
<script>
import icon from '../../utils/icon.js'
import config from '../../utils/config'
import crypt from '../../utils/crypto-helper-pkcs7'
import axios from 'axios'
import loading from '../../components/loading'
export default {
  data () {
    return {
      loading: true,
      parentVisible: false,
      childVisible: false,
      revampVisible: false,
      authVisible: false,
      navIcon: [],
      funIcon: [],
      addp: {
        parentName: '',
        parentUrl: '',
        parentIcon: '',
        pid: ''
      },
      addc: {
        childAtParent: '',
        childTit: '',
        childUrl: ''
      },
      menulist: [],
      revamp: {
        title: '',
        url: '',
        icon: '',
        id: '',
        iconShow: false
      },
      auth: {
        id: '',
        atMenu: '',
        title: '',
        unique_key: '',
        icon: '',
        action_uri: '',
        level: 'ROW'
      }
    }
  },
  components: {
    loading
  },
  created () {
    this.navIcon = icon.navIcon
    this.funIcon = icon.funIcon
    this.menu()
  },
  methods: {
    addparent () {
      this.parentVisible = true
      this.addp.parentName = ''
      this.addp.parentUrl = ''
      this.addp.parentIcon = ''
    },
    menu () {
      var param = {
        match: ''
      }
      var paramjson = JSON.stringify(param)
      var params = crypt.encrypt(paramjson)
      axios.get(config.domain + config.urls.menulist + '?param=' + params)
      .then(res => {
        var response = res.data
        if (response.errcode === 200) {
          this.menulist = response.data
          this.loading = false
        } else if (response.errcode === 200103) {
          this.$confirm('登录过期，请重新登录')
          .then(_ => {
            window.sessionStorage.clear()
            this.$router.push('/admin/login')
          })
          .catch(_ => {})
        }
      })
      .catch(error => {
        console.log(error)
      })
    },
    q_add () {
      var param = {
        title: this.addp.parentName,
        uri: this.addp.parentUrl,
        icon: this.addp.parentIcon
      }
      var paramjson = JSON.stringify(param)
      var params = crypt.encrypt(paramjson)
      axios.get(config.domain + config.urls.addparent + '?param=' + params)
      .then(res => {
        var response = res.data
        if (response.errcode === 200) {
          this.parentVisible = false
          this.addp.parentName = ''
          this.addp.parentUrl = ''
          this.addp.parentIcon = ''
          this.$notify({
            title: '成功',
            message: '菜单添加成功',
            type: 'success',
            duration: 1500
          })
          this.menu()
        } else if (response.errcode === 200103) {
          this.$confirm('登录过期，请重新登录')
          .then(_ => {
            window.sessionStorage.clear()
            this.$router.push('/admin/login')
          })
          .catch(_ => {})
        } else {
          this.$notify({
            title: '失败',
            message: '菜单添加失败',
            type: 'error',
            duration: 1500
          })
        }
      })
      .catch(error => {
        console.log(error)
      })
    },
    child_add () {
      var param = {
        parent_id: this.addp.pid,
        title: this.addc.childTit,
        uri: this.addc.childUrl
      }
      var paramjson = JSON.stringify(param)
      var params = crypt.encrypt(paramjson)
      axios.get(config.domain + config.urls.addchild + '?param=' + params)
      .then(res => {
        var response = res.data
        if (response.errcode === 200) {
          this.childVisible = false
          this.addc.childTit = ''
          this.addc.childUrl = ''
          this.menu()
          this.$notify({
            title: '成功',
            message: '菜单添加成功',
            type: 'success',
            duration: 1500
          })
        } else if (response.errcode === 200103) {
          this.$confirm('登录过期，请重新登录')
          .then(_ => {
            window.sessionStorage.clear()
            this.$router.push('/admin/login')
          })
          .catch(_ => {})
        } else {
          this.$notify({
            title: '失败',
            message: '菜单添加失败',
            type: 'error',
            duration: 1500
          })
        }
      })
      .catch(error => {
        console.log(error)
      })
    },
    addchild (pid, pname) {
      this.addp.pid = pid
      this.addc.childAtParent = pname
      this.childVisible = true
    },
    delmenu (id) {
      var param = {
        id: id
      }
      var paramjson = JSON.stringify(param)
      var params = crypt.encrypt(paramjson)
      this.$confirm('确定删除该菜单吗')
      .then(_ => {
        axios.get(config.domain + config.urls.deletemenu + '?param=' + params)
        .then(res => {
          var response = res.data
          if (response.errcode === 200) {
            this.menu()
            this.$notify({
              title: '成功',
              message: '菜单删除成功',
              type: 'success',
              duration: 1500
            })
          } else if (response.errcode === 200103) {
            this.$confirm('登录过期，请重新登录')
            .then(_ => {
              window.sessionStorage.clear()
              this.$router.push('/admin/login')
            })
            .catch(_ => {})
          } else {
            this.$notify({
              title: '失败',
              message: '菜单删除失败',
              type: 'error',
              duration: 1500
            })
          }
        })
        .catch(error => {
          console.log(error)
        })
      })
      .catch(_ => {})
    },
    revampmenu (item, type) {
      this.revampVisible = true
      this.revamp.id = item.id
      this.revamp.title = item.title
      this.revamp.url = item.uri
      if (type === 'p') {
        this.revamp.iconShow = true
        this.revamp.icon = item.icon
      } else {
        this.revamp.iconShow = false
        this.revamp.icon = ''
      }
    },
    q_revamp () {
      var revamParams = {
        id: this.revamp.id,
        icon: this.revamp.icon,
        title: this.revamp.title,
        uri: this.revamp.url
      }
      var paramjson = JSON.stringify(revamParams)
      var params = crypt.encrypt(paramjson)
      axios.get(config.domain + config.urls.updatemenu + '?param=' + params)
      .then(res => {
        var response = res.data
        if (response.errcode === 200) {
          this.revampVisible = false
          this.$notify({
            title: '成功',
            message: '菜单修改成功',
            type: 'success',
            duration: 1500
          })
          this.menu()
        } else if (response.errcode === 200103) {
          this.$confirm('登录过期，请重新登录')
          .then(_ => {
            window.sessionStorage.clear()
            this.$router.push('/admin/login')
          })
          .catch(_ => {})
        }
      })
      .catch(error => {
        console.log(error)
      })
    },
    addauth (id, title) {
      this.authVisible = true
      this.auth.id = id
      this.auth.atMenu = title
      this.auth.unique_key = ''
      this.auth.icon = ''
      this.auth.action_uri = ''
      this.auth.level = ''
      this.auth.title = ''
    },
    a_auth () {
      if (this.auth.level === '') {
        this.$notify({
          title: '警告',
          message: '功能类型（page or row）不能为空',
          type: 'error',
          duration: 1500
        })
        return false
      }
      var param = {
        menu_id: this.auth.id,
        name: this.auth.title,
        unique_key: this.auth.unique_key,
        icon: this.auth.icon,
        action_uri: this.auth.action_uri,
        level: this.auth.level
      }
      var paramjson = JSON.stringify(param)
      var params = crypt.encrypt(paramjson)
      axios.get(config.domain + config.urls.funadd + '?param=' + params)
      .then(res => {
        var response = res.data
        if (response.errcode === 200) {
          this.authVisible = false
          this.$notify({
            title: '成功',
            message: '功能添加成功',
            type: 'success',
            duration: 1500
          })
        } else if (response.errcode === 200103) {
          this.$confirm('登录过期，请重新登录')
          .then(_ => {
            window.sessionStorage.clear()
            this.$router.push('/admin/login')
          })
          .catch(_ => {})
        } else {
          this.$notify({
            title: '失败',
            message: '功能添加失败',
            type: 'error',
            duration: 1500
          })
        }
      })
      .catch(error => {
        console.log(error)
      })
    },
    checkmenu (id) {
      this.$router.push('/admin/index/system/viewRight/' + id)
    }
  }
}
</script>
<style>
.menu {
  background: #f1f7f8;
  padding: 10px;
  border-top: 2px solid #3f8cb6;
  border-radius: 4px;
}
.menu span.title {
  height: 32px;
  line-height: 32px;
  font-size: 15px;
}
.menu .row-btn {
  font-size: 16px;
  color: #000;
}
.menu .row-btn i {
  padding: 9px 3px;
  display: inline-block;
  color: #3c8dbc;
}
.menu .row-btn i:hover {
  color: #0a3751;
}
.menu ul {
  margin-left: 25px;
  color: #666;
}
.menu ul li,.menu .menu-box {
  border: 1px solid #d0d0d0;
  margin: 4px 0;
  padding: 0 6px;
}
.menu span.url{
  margin-left: 40px;
  color: #3c8dbc;
  font-size: 14px;
  height: 32px;
  line-height: 32px;
}
.menu .menu-box .icon-add {
  font-size: 14px;
  margin-right: 3px;
}
.input-group .input-group-box .input-new-tag {
  width: 80px;
  margin-top: 1px;
}
.input-group-box.input-group-center {
  padding: 3px 0;
}
.input-group-box.input-group-center .el-tag{
  margin: 1px 3px 1px 0;
}
.icon-title {
  display: inline-block;
  color: #3c8dbc;
  font-size: 16px;
  margin-right: 4px;
}
</style>

